<template>
  <div class="components-container">
    <!-- 新增/修改 -->
    <sweet-modal ref="dialog" class="dialog">
      <h3>{{ title }}</h3>
      <div style=" height:300px; margin:30px 50px">
        <div class="layui-form-item">
          <div class="layui-inline" >
            <label class="layui-form-label">员工姓名</label>
            <div class="layui-input-inline">
              <el-input v-model="staffData.STANAME" placeholder="请输入员工姓名" ></el-input>
            </div>
          </div>
          <div class="layui-inline" >
            <label class="layui-form-label">职务补贴</label>
            <div class="layui-input-inline">
              <el-input v-model="staffData.STAJOBSUBSIDY" placeholder="请输入补贴金额" ></el-input>
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">所属部门</label>
            <div class="layui-input-inline">
              <el-select v-model="staffData.STADPTID" placeholder="请选择部门">
                <el-option v-for="item in stadptTypes" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
       
          <div class="layui-inline">
            <label class="layui-form-label">员工类型</label>
            <div class="layui-input-inline">
              <el-select v-model="staffData.STACODNAME" placeholder="请选择类型">
                <el-option v-for="item in staffTypes" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">员工性别</label>
            <div class="layui-input-inline">
              <el-select v-model="staffData.STASEX" placeholder="请选择性别" >
                <el-option v-for="item in sexTypes" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">员工年龄</label>
            <div class="layui-input-inline">
              <el-input-number v-model="staffData.STAAGE" :min="1" :max="100" ></el-input-number>
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">证件类型</label>
            <div class="layui-input-inline">
              <el-select v-model="staffData.STACARDTYPE" placeholder="请选择证件类型" >
                <el-option v-for="item in cardTypes" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">证件号码</label>
            <div class="layui-input-inline">
              <el-input v-model="staffData.STACARDNO" placeholder="请输入证件号码" ></el-input>
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">文化程度</label>
            <div class="layui-input-inline">
              <el-select v-model="staffData.STACULTURALDEGREE" placeholder="请选择文化程度" >
                <el-option v-for="item in culTypes" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">出生日期</label>
            <div class="layui-input-inline">
              <el-date-picker v-date v-model="staffData.STABORNDATE" type="date" placeholder="选择日期" >
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">联系电话</label>
            <div class="layui-input-inline">
              <el-input v-model="staffData.STALINKTEL" placeholder="请输入联系电话" ></el-input>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">入职日期</label>
            <div class="layui-input-inline">
              <el-date-picker v-date v-model="staffData.STAENTERDATE" type="date" placeholder="选择日期" >
              </el-date-picker>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-form-item btnCenter">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" :loading="this.$store.state.isloading" @click="submit">提交</el-button>
      </div>
    </sweet-modal>
    <!-- 详情 -->
    <sweet-modal ref="dialogInfo" class="dialog">
      <h3>{{ title }}</h3>

      <div style=" height:300px; margin:30px 50px">
        <div class="layui-form-item">
          <div class="layui-inline" >
            <label class="layui-form-label">员工姓名</label>
            <div class="layui-input-inline">
              <el-input v-model="staffData.STANAME" readonly></el-input>
            </div>
          </div>
          <div class="layui-inline" >
            <label class="layui-form-label">职务补贴</label>
            <div class="layui-input-inline">
              <el-input v-model="staffData.STAJOBSUBSIDY" readonly></el-input>
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">所属部门</label>
            <div class="layui-input-inline">
              <el-input v-model="staffData.DPTNAME"  readonly></el-input>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">员工类型</label>
            <div class="layui-input-inline">
               <el-input v-model="staffData.STACODNAME" readonly></el-input>
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">员工性别</label>
            <div class="layui-input-inline">
               <el-input v-model="staffData.STASEXDESC"  readonly></el-input>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">员工年龄</label>
            <div class="layui-input-inline">
              <el-input v-model="staffData.STAAGE"  readonly></el-input>
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">证件类型</label>
            <div class="layui-input-inline">

               <el-input v-model="staffData.STACARDTYPE" readonly></el-input>
            
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">证件号码</label>
            <div class="layui-input-inline">
              <el-input v-model="staffData.STACARDNO" readonly></el-input>
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">文化程度</label>
            <div class="layui-input-inline">
               <el-input v-model="staffData.STACULTURALDEGREE" readonly></el-input>
            
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">出生日期</label>
            <div class="layui-input-inline">
               <el-input v-model="staffData.STABORNDATE" readonly></el-input>
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">联系电话</label>
            <div class="layui-input-inline">
              <el-input v-model="staffData.STALINKTEL"  readonly></el-input>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">入职日期</label>
            <div class="layui-input-inline">
              <el-input v-model="staffData.STAENTERDATE"  readonly></el-input>
            </div>
          </div>
        </div>
      </div>





     
      <div class="layui-form-item btnCenter">
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </sweet-modal>
  </div>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/common.scss";
</style>
<script>
import sweetModal from "@/components/sweetModal";
import apiBase from "@/api/apiBase.js";
import { formatDate, timeStringToDate } from "@/utils/date.js";
const ADD = "新增";
const MODIFY = "修改";
const DELETE = "删除";
const INFO = "详情";
const DIMISS = "离职";
const RESTOR = "复职";
export default {
  name: "staffManageMain",
  props: {
    orderType: {
      type: String,
      default() {
        return ADD;
      }
    }
  },
  data() {
    return {
      title: null,
      staffData: {

      },
      stadptTypes: [],
      staffTypes: [],
      sexTypes: [],
      cardTypes: [],
      culTypes: [],
    };
  },
  methods: {
    //获取部门
    getStaffDept() {
      let data = {};
      apiBase.DoService(
        data,
        apiBase.getApiAdress().Staff.QueryDept,
        res => {
          let deptTypeData = res.data.content.OutData,
            legendsUsersData = deptTypeData.map(item => ({
              label: item.DPTNAME,
              value: item.DPTID
            }));
          this.stadptTypes = legendsUsersData;
        },
        res => {
          this.$message.error(res.data.msg);
        }
      );
    },
    //获取员工类型
    getStaffTypes() {
      let data = {};
      apiBase.DoService(
        data,
        apiBase.getApiAdress().Code.GetStaType,
        res => {
          let staTypeData = res.data.content,
            legendsUsersData = staTypeData.map(item => ({
              label: item.CodeName,
              value: item.CodeValue
            }));
          this.staffTypes = legendsUsersData;
        },
        res => {
          this.$message.error(res.data.msg);
        }
      );
    },
    //获取性别
    getStaffSex() {
      let data = {};
      apiBase.DoService(
        data,
        apiBase.getApiAdress().Code.GetSex,
        res => {
          let sexTypeData = res.data.content,
            legendsUsersData = sexTypeData.map(item => ({
              label: item.CodeName,
              value: item.CodeValue
            }));
          this.sexTypes = legendsUsersData;
        },
        res => {
          this.$message.error(res.data.msg);
        }
      );
    },
    //获取证件类型
    getCardTypes() {
      let data = {};
      apiBase.DoService(
        data,
        apiBase.getApiAdress().Code.GetCardType,
        res => {
          let cardTypeData = res.data.content,
            legendsUsersData = cardTypeData.map(item => ({
              label: item.CodeName,
              value: item.CodeValue
            }));
          this.cardTypes = legendsUsersData;
        },
        res => {
          this.$message.error(res.data.msg);
        }
      );
    },
    //获取文化程度
    getCulTypes() {
      let data = {};
      apiBase.DoService(
        data,
        apiBase.getApiAdress().Code.GetCulturaldegree,
        res => {
          let culTypeData = res.data.content,
            legendsUsersData = culTypeData.map(item => ({
              label: item.CodeName,
              value: item.CodeValue
            }));
          this.culTypes = legendsUsersData;
        },
        res => {
          this.$message.error(res.data.msg);
        }
      );
    },
    //功能操作
    open(order, id) {
      this.order = order;
      this.dataRepeat();
      switch (this.order) {
        case ADD:
          this.title = "员工新增";
          this.initSelectData();
          this.$refs.dialog.open();
          break;
        case MODIFY:
          this.title = "员工修改";
          this.initSelectData();
          this.dataInfo(id);
          this.$refs.dialog.open();
          break;
        case DELETE:
          this.dataDelete(id);
          break;
        case INFO:
          this.title = "员工详情";
          this.dataInfo(id);
          this.$refs.dialogInfo.open();
          break;
        case DIMISS:
          this.dateDimiss(id);
          break;
        case RESTOR:
          this.dateRestor(id);
          break;
        default:
      }
    },
    //提交
    submit() {
      this.$store.state.isloading = true;
      switch (this.order) {
        case ADD:
          this.dataAdd();
          break;
        case MODIFY:
          this.dataModify();
          break;
        case DELETE:
          break;
        case INFO:
          this.$refs.dialogInfo.close();
          break;
        case DIMISS:
          break;
        case RESTOR:
          break;
        default:
      }
    },
    //员工新增
    dataAdd() {
      let data = JSON.parse(JSON.stringify(this.staffData));
      if (data.STABORNDATE)
        data.STABORNDATE = formatDate(data.STABORNDATE, "yyyyMMdd");
      if (data.STAENTERDATE)
        data.STAENTERDATE = formatDate(data.STAENTERDATE, "yyyyMMdd");
      apiBase.DoService(
        data,
        apiBase.getApiAdress().Staff.Create,
        res => {
          this.refreshData();
          this.$refs.dialog.close();
          this.$message({
            message: this.order + res.data.msg,
            type: "success"
          });
        },
        res => {
          this.$message.error(res.data.msg);
        }
      );
    },
    //员工修改
    dataModify() {
      let data = JSON.parse(JSON.stringify(this.staffData));
      if (data.STABORNDATE)
        data.STABORNDATE = formatDate(data.STABORNDATE, "yyyyMMdd");
      if (data.STAENTERDATE)
        data.STAENTERDATE = formatDate(data.STAENTERDATE, "yyyyMMdd");
      apiBase.DoService(
        data,
        apiBase.getApiAdress().Staff.Modify,
        res => {
          this.refreshData();
          this.$refs.dialog.close();
          this.$message({
            message: this.order + res.data.msg,
            type: "success"
          });
        },
        res => {
          this.$message.error(res.data.msg);
        }
      );
    },
    //员工删除
    dataDelete(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(callback => {
        var data = {
          STAID: id
        };
        apiBase.DoService(
          data,
          apiBase.getApiAdress().Staff.Delete,
          res => {
            this.refreshData();
            this.$message({
              message: this.order + res.data.msg,
              type: "success"
            });
          },
          res => {
            this.$message.error(res.data.msg);
          }
        );
      });
    },
    //员工详情
    dataInfo(id) {
      var data = {
        STAID: id
      };
      apiBase.DoService(
        data,
        apiBase.getApiAdress().Staff.Detail,
        res => {
          this.staffData = res.data.content;
          this.staffData.STAID = id;
        },
        res => {
          this.$message.error(res.data.msg);
        }
      );
    },
    //员工离职
    dateDimiss(id) {
      this.$confirm("此操作将会将员工让为离职状态, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(callback => {
        var data = {
          STAID: id
        };
        apiBase.DoService(
          data,
          apiBase.getApiAdress().Staff.Quit,
          res => {
            this.refreshData();
            this.$message({
              message: this.order + res.data.msg,
              type: "success"
            });
          },
          res => {
            this.$message.error(res.data.msg);
          }
        );
      });
    },
    //员工复职
    dateRestor(id) {
      this.$confirm("此操作将会将员工让为正常状态, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(callback => {
        var data = {
          STAID: id
        };
        apiBase.DoService(
          data,
          apiBase.getApiAdress().Staff.Reinstat,
          res => {
            this.refreshData();
            this.$message({
              message: this.order + res.data.msg,
              type: "success"
            });
          },
          res => {
            this.$message.error(res.data.msg);
          }
        );
      });
    },
    //数据重置
    dataRepeat() {
      this.staffData = { STAENTERDATE: null };
    },
    //初始化下拉框数据
    initSelectData() {
      this.getStaffTypes();
      this.getStaffDept();
      this.getStaffSex();
      this.getCardTypes();
      this.getCulTypes();
    },
    refreshData() {
      this.$emit("refreshData");
    },
    closeDialog() {
      if (this.order === ADD || this.order === MODIFY)
        this.$refs.dialog.close();
      else if (this.order === INFO) this.$refs.dialogInfo.close();
    }
  },
  components: {
    sweetModal
  },
  mounted() {},
  created() {},
  // watch: {
  //   "staffData.STABORNDATE": function(val) {
  //     this.staffData.STABORNDATE = formatDate(val, "yyyy-MM-dd");
  //   },
  //   "staffData.STAENTERDATE": function(val) {
  //     this.staffData.STAENTERDATE = formatDate(val, "yyyy-MM-dd");
     
  //   }
  // }
};
</script>